<template>
	<view style="display: flex;margin-bottom: 25rpx;">
		<view style="width: 15%;display: flex;flex-flow: column;justify-items: center;align-items: center;">
			<u-avatar :src="item.src" size=65></u-avatar>
		</view>
		<view style="width: 85%;display: flex;flex-flow: column;align-items: baseline;justify-content: space-between;">
			<view style="display: flex;justify-content:space-between;width: 100%;">
				<text style="text-align: center;font-size: 25rpx;color: #82848A;">{{item.nickname}}</text>
				<text>{{computedTime}}</text>
			</view>
			<view style="display: flex;justify-content: space-between;width: 100%;">
				<text style="width: 88%;color: #000000;" @click='longtap(item.nickname)'>{{item.content}}</text>
				<view style="width: 10%;">
					<text>{{}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		timeAgo
	} from '../../utils/remarkUtil.js'
	export default {
		data() {
			return {
				heartThumb: 'heart'


			}
		},
		computed: {
			computedTime: function() {
				return timeAgo(this.item.createTime);
			}
		},
		props: {
			item: {}
		},
		methods: {
			longtap(data) {
				if (this.focue) {
					this.focue = false;
				}
				let remarkUsername = '@' + data + ':';
				this.$emit("remarkUsername", remarkUsername)
				this.$emit("focus", true)
			},
			heart() {
				if (this.heartThumb == 'heart') {
					this.heartThumb = 'heart-fill'
				} else {
					this.heartThumb = 'heart'
				}
			}
		}
	}
</script>

<style>
</style>
